<template>
	<div class="publicTop">
		<div class="navWrapper clearfix">
			<a :href="baseUrl+'/channel/producttype/prolist.doprolist.do?from=son'" class="logo-wrap left flex flex-align-center">
				<img class="logo" src="../assets/images/logo.svg" alt="" />
				<span class="split-line"></span>
				<span class="sysname">管理平台</span>
			</a>
			
			<div class="navWrap fr" v-if="showTop">
				<div class="items" title="" @click="showMenu=!showMenu;showMenu&&clickCount('首页顶部入口','平台导航')" @mouseleave.stop="menuLeave()">
					<a href="javascript:void(0)" class="flex">平台导航<i v-if="!showMenu" class="iconfont icon-zhankai"></i><i v-if="showMenu" class="iconfont icon-shouqi"></i></a>
					<div class="navMenu" v-if="showMenu" @click.stop>
						<div class="tab">
							<div class="items" :class="menuIndex==0?'on':''" @mouseenter.stop="menuTab(0)">产品</div>
							<div class="items" :class="menuIndex==1?'on':''" @mouseenter.stop="menuTab(1)">工具库</div>
							<div class="items" :class="menuIndex==2?'on':''" @mouseenter.stop="menuTab(2)">营销工具</div>
						</div>
						<div class="navLiat" v-if="menuIndex<2">
							<el-row :gutter="30">
								<el-col :span="4" :key="index" v-for="(item,index) in allList[menuIndex]">
									<a target="_blank" @click="clickCount('首页顶部入口','平台导航')" class="tit" v-if="item.content!='外呼防封线路'&&item.authority =='true'" :href="baseUrl+item.link">{{item.content}}</a>
								</el-col>
							</el-row>
						</div>

						<div class="navLiat" v-if="menuIndex==2">
							<el-row :gutter="30">
								<el-col :span="8">
									<div class="menu-block">
										<p class="menu-title">企业商机助手</p>
										<img class="menu-img" style="margin: 20px auto 17px;max-width: 160px;" :src="this.code" alt="" />
										<a @click="clickCount('首页顶部入口','平台导航')" target="_blank" class="operate-detail" :href="baseUrl+'/channel/buyertwo/goPartsalehelp'">操作说明</a>
									</div>
								</el-col>

								<el-col :span="8">
									<div class="menu-block">
										<p class="menu-title">企业彩铃微信提单</p>
										<img class="menu-img" style="height: 188px;" src="../assets/images/home/weixin.png" alt="" />
									</div>
								</el-col>

								<el-col :span="8">
									<div class="menu-block">
										<p class="menu-title">企业彩铃支付宝提单</p>
										<img class="menu-img" style="height: 189px;" src="../assets/images/home/alipay.png" alt="" />
									</div>
								</el-col>
							</el-row>
						</div>
					</div>
				</div>
				<div class="items">
					<a target="_blank" @click="clickCount('首页顶部入口','帮助中心')" :href="baseUrl+'/channel/help/index.do'" title="">帮助中心</a>
				</div>
				<div class="items" @mouseenter.stop="showNav=true;showNav&&clickCount('首页顶部入口','用户账户')" @mouseleave.stop="showNav=false">
					<a href="javascript:void(0)" class="flex flex-align-center" title="">
						<div class="head-pic-wrap">
							<img :src="user.userIcon||default_portrait"/>
							<div class="vip" v-if="user.vip_status==1"><font style="zoom: 0.7;">{{user.vip_level}}</font></div>
						</div>
						<span class="text-overflow-hidden" style="max-width: 64px;">{{user.username}}</span>
						<i v-if="!showNav" class="iconfont icon-zhankai"></i><i v-if="showNav" class="iconfont icon-shouqi"></i>
					</a>
					<div class="userMenu" v-if="showNav">
						<div class="user-info">
							<div class="info-block flex flex-align-center flex-justify-between">
								<div class="flex flex-align-center">
									<div class="head-pic">
										<img :src="user.userIcon||default_portrait2" alt="" />
									</div>
									<span class="username">{{user.username}}</span>
									<span class="vip-tag" v-if="user.vip_status==1"><font style="zoom: 0.7;">{{user.vip_level}}</font></span>
								</div>
								<a href="javascript:void(0)" @click="clickCount('首页顶部入口','用户账户','logout');" class="top-btn">退出登录</a>
							</div>
							<div class="info-block flex flex-align-center flex-justify-between">
								<p>渠道账号：<b class="account">{{user.phone}}</b></p>
								<a href="javascript:void(0)" @click="clickCount('首页顶部入口','用户账户');editPwd()" class="top-btn">修改密码</a>
							</div>
							<div class="info-block flex flex-align-center flex-justify-between">
								<p>账户余额：<span class="money">{{user.left_credit/100}}元</span></p>
								<div>
									<a @click="clickCount('首页顶部入口','用户账户')" target="_blank" :href="baseUrl+'/channel/creditrecharge/activity.do'" class="top-btn">充值</a>
									<a @click="clickCount('首页顶部入口','用户账户')" target="_blank" :href="baseUrl+'/channel/creditrecharge/record.do'" class="top-btn">支出明细</a>
									<a @click="clickCount('首页顶部入口','用户账户')" target="_blank" :href="baseUrl+'/channel/buyerorder/list'" class="top-btn">收益明细</a>
								</div>
							</div>
						</div>
						<div class="flex flex-justify-between">
							<p @click="clickCount('首页顶部入口','用户账户','goUserCenter')" class="top-link flex flex-align-center flex-justify-center">
								<img class="top-link-icon" :src="icon_user"/>
								<img class="top-link-icon b" :src="icon_user_b"/>
								个人中心
							</p>
							<p @click="clickCount('首页顶部入口','用户账户','goVIPCenter')" class="top-link flex flex-align-center flex-justify-center">
								<img class="top-link-icon" :src="icon_vip"/>
								<img class="top-link-icon b" :src="icon_vip_b"/>
								会员中心
							</p>
							<a class="top-link flex flex-align-center flex-justify-center" @click="clickCount('首页顶部入口','用户账户');goCoupon()" href="javascript:void(0)">
								<img class="top-link-icon" :src="icon_quan"/>
								<img class="top-link-icon b" :src="icon_quan_b"/>
								我的卡券
							</a>
						</div>
					</div>
				</div>
				<!--<div class="mytips" v-if="user.vip_status!=1&&showTip">
					<div class="triangle_up"></div>
					<div class="tips">
						<template v-if="user.task_one_flag!=1&&user.task_two_flag!=1">
							完成<span class="tasknum">2</span>个任务，即可享受每月优惠哦
						</template>
						<template v-if="(user.task_one_flag!=1&&user.task_two_flag==1)||(user.task_one_flag==1&&user.task_two_flag!=1)">
							您再完成<span class="tasknum">1</span>个任务，即可享受每月优惠哦
						</template>

						<img id="tipsclose" @click="closeTip" src="../assets/images/close1.png" alt="">
					</div>
				</div>-->
			</div>
		</div>
		
	</div>
</template>

<script>
	import { baseUrl,setCookie,getCookie } from '@/utils/common'
	import default_portrait from '@/assets/images/default_portrait.svg'
	import default_portrait2 from '@/assets/images/default_portrait.png'
	import icon_user from '@/assets/images/ic_us.png'
	import icon_user_b from '@/assets/images/ic_us_p.png'
	import icon_vip from '@/assets/images/ic_vip.png'
	import icon_vip_b from '@/assets/images/ic_vip_p.png'
	import icon_quan from '@/assets/images/ic_quan.png'
	import icon_quan_b from '@/assets/images/ic_quan_p.png'
	
	
	export default {
		data() {
			return {
				default_portrait,
				default_portrait2,
				icon_user,
				icon_user_b,
				icon_vip,
				icon_vip_b,
				icon_quan,
				icon_quan_b,
				
				baseUrl,
				showTip: true,
				showMenu: false,
				showNav:false,
				showTop:true,
				menuIndex: 0,
				hoverTimer:null,
				code:'',
				allList: [
					[{
							content: '企业彩铃',
							link: '/companyringweb/circle/index'
						},
						{
							content: '视频彩铃',
							link: '/channel/order/qwvedio/circle/list?timetype=2'
						},
						{
							content: '视频制作',
							link: '/channel/help/first/vediomake'
						},
						{
							content: '铃音录制',
							link: '/channel/ringmakeman/list.do'
						},
						{
							content: '400电话',
							link: '/channel/product/fourhundredtel/list.do?feetype=feetype_all&subphone=-1'
						},
						{
							content: '挂机短信',
							link: '/static/vue_project/index.html?producttype=hangup&token=' + getCookie("token") + '#/bussinessintro'
						},
						{
							content: '号码认证',
							link: '/channel/phoneauth/intro/index.do?version=two'
						},
						{
							content: '手机靓号',
							link: '/channeltwo/product/dayRecommend/recommendlist'
						},
						{
							content: '乐会员',
							link: '/channel/product/leclub/intro'
						},
						{
							content: '企业秀',
							link: '/channel/productmodelinfo/list.do'
						},
						{
							content: '地图标注',
							link: '/channeltwo/product/map/toMapIndex.do'
						},
						{
							content: '外呼防封线路',
							link: '/channel/product/telcard/index.do'
						},
					],
					[{
							content: '铃音内容库',
							link: '/channel/producttools/goringcontentlist?DISCOUNT_ACTIVITY_UID=2d38df77458e4f5485166f72defe199a',
							authority:'true',	
						},
						{
							content: '背景音乐库',
							link: '/channel/producttools/gobgmusiclist',
							authority:'true',
						},
						{
							content: '图片转文字',
							link: '/channel/producttools/gopicchangetextlist',
							authority:'true',	
						},
						{
							content: '背景音合成',
							link: '/channel/producttools/gobgmusicmakelist?DISCOUNT_ACTIVITY_UID=e01cf7ec6c4f4d2c86c52029e21167c4',
							authority:'true',		
						},
						{
							content: '视频合成',
							link: '/channel/vediomake/tool/govediomake.do',
							authority:'true',	
						},
						{
							content: '铃音转换',
							link: '/channel/toolorder/goringchange.do',
							authority:'true',	
						},
					]
				],
			}
		},
		watch:{
			user: {
				deep: true,
				immediate: true,
				handler(){
					const producttype = sessionStorage.getItem('producttype')
					if(producttype=='hangup'&&this.user.userRoleBasic==1){
						this.showTop=false
					}
				}
			},
		},
		computed: {
			user: function() {
				return this.$store.state.user
			}
		},
		mounted(){
			const producttype = sessionStorage.getItem('producttype')
			if(producttype=='hangup'&&this.user.userRoleBasic==1){
				this.showTop=false
			}
			this.getProduct()
		},
		methods: {
			clickCount(bigmodelname,modelname,callback){
//				if(callback){
//					this[callback]()
//				}
				console.log(bigmodelname,modelname)
				this.$request.addHomePV({
					bigmodelname,
					modelname,
				}).then(res=>{
					if(callback){
						this[callback]()
					}
				}).catch(()=>{
					if(callback){
						this[callback]()
					}
				})
			},
			goUserCenter(){
				this.$router.push('/home/ucenter')
			},
			goVIPCenter(){
				location.href=baseUrl+'/channel/vipuser/index.do'
			},
	        getProduct(){
	            this.$request.homeNoticeUserProduct()
	                .then(res => {
	                    if(res.code == 0) {
	                        this.code = res.user.partsale_qrcode
	                        this.authority = res.prosecsetpd

							// 判断全部产品是否展示
							this.$set(this.allList[0][0], 'authority', this.authority.ring == 1 ? 'true' : 'false')
							this.$set(this.allList[0][1], 'authority', this.authority.qwvedio == 1 ? 'true' : 'false')
							this.$set(this.allList[0][2], 'authority', this.authority.vediomake == 1 ? 'true' : 'false')
							this.$set(this.allList[0][3], 'authority', this.authority.ringmake == 1 ? 'true' : 'false')
							this.$set(this.allList[0][4], 'authority', this.authority.fourhundred == 1 ? 'true' : 'false')
							this.$set(this.allList[0][5], 'authority', this.authority.hangup == 1 ? 'true' : 'false')
							this.$set(this.allList[0][6], 'authority', this.authority.phoneauth == 1 ? 'true' : 'false')
							this.$set(this.allList[0][7], 'authority', this.authority.flyphone == 1 ? 'true' : 'false')
							this.$set(this.allList[0][8], 'authority', this.authority.leclub == 1 ? 'true' : 'false')
							this.$set(this.allList[0][9], 'authority', this.authority.hfive == 1 ? 'true' : 'false')
							this.$set(this.allList[0][10], 'authority', this.authority.map == 1 ? 'true' : 'false')
							this.$set(this.allList[0][11], 'authority', this.authority.telcard == 1 ? 'true' : 'false')
	                    } else {
	                        this.msgError(res.msg)
	                    }
	                })
	        },
			menuEnter() {
				if(this.hoverTimer){
					clearTimeout(this.hoverTimer)
					this.hoverTimer=null
				}
				this.showMenu = true
			},
			menuLeave() {
				if(this.hoverTimer){
					clearTimeout(this.hoverTimer)
					this.hoverTimer=null
				}
				this.hoverTimer=setTimeout(()=>{
					this.showMenu = false
				},600)
			},
			menuTab(index) {
				this.menuIndex = index
			},
			editPwd(){
				this.$emit('editPwd')
			},
			goCoupon(){
				this.$router.push('/home/ucenter/coupon')
			},
			logout: function() {
//				setCookie('producttype','',-1)
				sessionStorage.removeItem('producttype')
				localStorage.setItem('logout',true)
				setTimeout(()=>{
					window.location.href = baseUrl + '/logout.do'
				},300)
				
			},
			closeTip: function() {
				this.showTip = false
			},

		}
	}
</script>

<style scoped lang="scss">
	@import "@/assets/styles/public/reset.scss";
	.publicTop {
		width: 100%;
		height: 40px;
		background: #000000;
		position: relative;
		.navWrapper {
			height:100%;
			.logo-wrap{
				margin-left: 40px;
				height:100%;
				
				.logo{
					width:auto;
				}
				.split-line{
					width: 1px;
					height: 24px;
					background: #808080;
					margin: 0 10px;
				}
				.sysname{
					font-size: 14px;
					color: #fff;
					font-weight: bold;
				}
			}
			.navWrap {
				display: flex;
				justify-content: space-around;
				height: 100%;
				line-height: 40px;
				padding-right: 40px;
				>.items {
					position: relative;
					cursor:pointer;
					margin-left:20px;
					
					.iconfont{
						font-size:18px;
						font-weight:normal;
						margin-left:2px;
					}
					a {
						font-size: 16px;
						color: #fff;
					}
					&:hover{
						a{
							color: #F39800;
						}
					}
					.head-pic-wrap{
						width: 20px;
						height: 20px;
						position: relative;
						margin-right: 10px;
						img{
							display: block;
							width: 100%;
							height: 100%;
							border-radius: 50%;
							overflow: hidden;
						}
						.vip{
							width: 16px;
							height: 13px;
							text-align: center;
							line-height: 14px;
							font-size: 12px;
							color: #fff;
							margin-left: 8px;
							background: url(../assets/images/normallevel.png);
							background-size: 100% 100%;
							position: absolute;
							right: -8px;
							top: -7px;
						}
					}
					.navMenu {
						position: absolute;
						top: 40px;
						/*left: 0;*/
						right: 0;
						margin: 0 auto;
						width: 1024px;
						height: auto;
						background: #FFFFFF;
						box-shadow: 0px 0px 10px rgba(51, 51, 51, 0.2);
						z-index: 10;
						text-align: center;
						.tab {
							width: 100%;
							display: flex;
							justify-content: space-between;
							border-bottom: 1px solid #EEEEEE;
							.items {
								width: 340px;
								height: 60px;
								line-height: 60px;
								font-size: 16px;
								color: #333333;
							}
							.items.on {
								color: #FFFFFF;
								background: #F39800;
							}
						}
						.navLiat {
							width: 100%;
							min-height: 152px;
							// display: flex;
							// justify-content: space-between;
							// flex-wrap: wrap;
							// border-bottom: 1px solid #EEEEEE; 
							padding-bottom: 20px;
							.tit {
								width: 160px;
								height: 56px;
								line-height: 56px;
								font-size: 16px;
								color: #333333;
								cursor: pointer;
								display: block;
							}
							.tit:hover {
								color: #0088EA;
							}
							.menu-block{
								.menu-title{
									line-height: 56px;
									height: 56px;
									text-align: center;
								}
								.menu-img{
									width: auto;
									margin-top: 20px;
									display: block;
									margin-bottom: 17px;
								}
								.operate-detail{
									width: 80px;
									height: 24px;
									background: #0081DD;
									opacity: 1;
									border-radius: 12px;
									margin: 0 auto;
									font-size: 12px;
									color: #fff;
									line-height: 24px;
									display: block;
								}
							}
						}
					}
					.userMenu {
						position: absolute;
						top: 40px;
						right: 0;
						width: 500px;
						height: 233px;
						background: #FFFFFF;
						box-shadow: 0px 0px 10px rgba(51, 51, 51, 0.2);
						z-index: 10;
						line-height: normal;
						.user-info{
							padding: 24px 30px 21px;
							.info-block{
								margin-bottom: 19px;
								font-size: 14px;
								color: #333;
								
								
								&:last-child{
									margin-bottom: 0;
								}
								.head-pic{
									width: 50px;
									height: 50px;
									border-radius: 50%;
									overflow: hidden;
									img{
										width: 100%;
										height: 100%;
									}
								}
								.username{
									font-size: 16px;
									margin-left: 14px;
								}
								.vip-tag{
									width: 18px;
									height: 15px;
									text-align: center;
									line-height: 16px;
									font-size: 12px;
									color: #fff;
									margin-left: 8px;
									background: url(../assets/images/normallevel.png);
									background-size: 100% 100%;
								}
								.top-btn{
									color: #0088EA;
									font-size: 14px;
									cursor: pointer;
									margin-left: 20px;
								}
								.money{
									color: #F39800;
									font-weight: bold;
									font-size: 16px;
								}
							}
						}
						.top-link{
							width: 166px;
							height: 60px;
							background: #f5f5f5;
							font-size: 16px;
							color: #333;
							cursor:pointer;
							
							.top-link-icon{
								width: 20px;
								height: 20px;
								margin-right: 10px;
							}
							.b{
								display: none;
							}
							&:hover{
								color: #0088EA;
								.top-link-icon{
									display: none;
								}
								.b{display: block;}
							}
						}
					}
				}
			}
		}
	}
	
	>>>.el-row {
		margin: 0 !important;
		padding-top: 20px;
	}
</style>